import { useLocalStorageState } from 'ahooks';
import { Checkbox, Form, Input } from 'antd';
import React, { useEffect, useState } from 'react';

import Title from '@/components/Title';
import { pyVersion, spawn } from '@/utils/api';
import { getName, getTauriVersion, getVersion } from '@tauri-apps/api/app';
import { appWindow } from '@tauri-apps/api/window';
import Page from './components/Page';
import ProCard from '@ant-design/pro-card';

const {
  setResizable,
  setTitle,
  maximize,
  unmaximize,
  minimize,
  unminimize,
  show,
  hide,
  setDecorations,
  setAlwaysOnTop,
  setSize,
  setMinSize,
  setMaxSize,
  setPosition,
  setFullscreen,
  setIcon,
  center,
  requestUserAttention,
} = appWindow;

function useAppInfo() {
  const [name, setName] = useState('');
  const [version, setVersion] = useState('');
  const [tauriVersion, seTauriVersion] = useState('');

  useEffect(() => {
    getName().then((name) => {
      setName(name);
    });
    getVersion().then((ver) => {
      setVersion(ver);
    });
    getTauriVersion().then((ver) => {
      seTauriVersion(ver);
    });
  }, []);
  return { name, version, tauriVersion };
}

const actions: any = {
  decorations: setDecorations,
  resizable: setResizable,
};
export default (props: any) => {
  const { name, version, tauriVersion } = useAppInfo();
  const [form] = Form.useForm();
  const [values, setValues] = useLocalStorageState<any>('settings');

  return (
    <Page title="设置">
      <Form
        form={form}
        layout="vertical"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        initialValues={values}
        onValuesChange={(changedValues, allValues) => {
          for (let [key, val] of Object.entries(changedValues)) {
            actions?.[key]?.(val);
          }
          setValues(allValues);
          console.log(changedValues, allValues);
        }}
      >
        <ProCard title={<Title level={2}>常规</Title>} ghost size="small">
          <Form.Item label="标题栏" name="decorations" valuePropName="checked">
            <Checkbox>显示</Checkbox>
          </Form.Item>
          <Form.Item label="窗口" name="resizable" valuePropName="checked">
            <Checkbox>可调整</Checkbox>
          </Form.Item>
        </ProCard>
        <ProCard title={<Title level={2}>Python</Title>} ghost size="small">
          <Form.Item label="Python路径" name="python">
            <Input placeholder={'/path/to/vendor/python'} />
          </Form.Item>
          <Form.Item label="pip 配置" name="pip">
            <Input.TextArea
              placeholder={`index-url=http://mirrors.tools.huawei.com/pypi/simple/\ntrusted-host=mirrors.tools.huawei.com`}
            />
          </Form.Item>
        </ProCard>
        <ProCard title={<Title level={2}>应用路径</Title>} ghost size="small">
          <Form.Item label="应用路径" name="apps">
            <Input placeholder={'/path/to/extensions'} />
          </Form.Item>
        </ProCard>
        <ProCard title={<Title level={2}>开发路径</Title>} ghost size="small">
          <Form.Item label="应用路径" name="devApps">
            <Input placeholder={'/path/to/debug/example'} />
          </Form.Item>
        </ProCard>
      </Form>
      <ProCard title={<Title level={2}>关于 {name}</Title>} ghost size="small">
        <div>版本: {version}</div>
        <div>Tauri {tauriVersion}</div>
        {/* {pythonVersion ? <div>{pythonVersion}</div> : null} */}
        {/* {gitVersion ? <div>{gitVersion}</div> : null} */}
      </ProCard>
    </Page>
  );
};
